<template>
	<view class="content">
		<QSNavbar :navbarItems="navbarItems_1" backgroundColor="#fff"></QSNavbar>
		<view class="top">
			<view class="flex-between">
				<u-search @search="search" @custom="search" placeholder="请输入检索内容" :showAction="false"
					v-model="searchKey"></u-search>
				<view :class="[
            { 'checked-address flex-align': address.name != undefined },
            { 'adress flex-align': address.name == undefined },
          ]" @click="openAdress">
					<text>{{ address.name || "全部" }}</text>
					<u-icon name="map" color="#000" size="15" v-if="address.name == undefined"></u-icon>
					<u-icon name="map" color="#2F75FA" size="15" v-if="address.name != undefined"></u-icon>
				</view>
			</view>

			<!-- 菜单栏 -->
			<view class="top-menu-list">
				<view class="top-menu-item" v-for="(item, index) in filterTab" :key="index"
					@click="openKind(item,index)">
					<view class="add_na">
						<view :class="[
             clickMenuId == item.id ? 'menu-image' : 'menu-image-no-checked',
            ]">
							<image :src="item.icon" mode="scaleToFill" />
						</view>
						<text :class="[
              clickMenuId == item.id ? 'checked-text' : 'no-checked-text',
            ]">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="venue-list">
			<scroll-view scroll-y="true" class="scrollcolumn">
				<view class="bottom">
					<view class="bottom-item" v-for="(item, index) in detail.list" :key="index"
						@click="handClick(item.id)">
						<view class="image-box">
							<view class="tag-box" v-if="item.carefully_chosen == 1">
								<image mode="aspectFit"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7f02908a4b91ed16c41d59d68ed6c3df027c274f.png" />
								<text>精选</text>
							</view>
							<view class="image-box2">
								<image :src="item.venue_thumb" />
							</view>
						</view>
						<view class="item-info">
							<view class="item-info-top">
								<view class="title">{{ item.venue_name }}</view>
								<view class="tag-list">
									<u-tag v-for="(mark, markIndex) in item.marks" :key="markIndex" :text="mark"
										:borderColor="isOdd(markIndex) ? '#cdf0de' : '#fbdafd'"
										:bgColor="isOdd(markIndex) ? '#cdf0de' : '#fbdafd'"
										:color="isOdd(markIndex) ? '#24b96a' : '#ee58f6'" size="mini"></u-tag>
								</view>
							</view>
							<view class="item-info-bottom">
								<view class="desc">{{ item.address }}</view>
								<view class="mi">{{ item.distance }}</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" loading-text="努力加载中" loadmore-text="点击加载更多" nomore-text="实在没有了"
						:line="true" @loadmore="loadNewsList" color="#999999" fontSize="11px" />
				</view>
			</scroll-view>
		</view>

		<tar-bar :valueModel="tabbar_index" :footerArr="homeData.footer"></tar-bar>
		<con-alert :show="alertShow" @close="close" title="更多" mode="top" :closeables="false" round="0">
			<view class="top" style="padding:0;margin-top:200rpx">
				<view class="flex-between">
					<u-search @search="search" @custom="search" placeholder="请输入检索内容" :showAction="false"
						v-model="searchKey"></u-search>
					<view :class="[
            { 'checked-address flex-align': address.name != undefined },
            { 'adress flex-align': address.name == undefined },
          ]" @click="openAdress">
						<text>{{ address.name || "全部" }}</text>
						<u-icon name="map" color="#000" size="15" v-if="address.name == undefined"></u-icon>
						<u-icon name="map" color="#2F75FA" size="15" v-if="address.name != undefined"></u-icon>
					</view>
				</view>

				<!-- 菜单栏 -->
				<view class="top-menu-list">
					<view class="top-menu-item" v-for="(item, index) in detail.tabList" :key="index"
						@click="openKind(item,index)">
						<view class="add_na">
							<view :class="[
              clickMenuId == item.id ? 'menu-image' : 'menu-image-no-checked',
            ]">
								<image :src="item.icon" mode="scaleToFill" />
							</view>
							<text :class="[
              clickMenuId == item.id ? 'checked-text' : 'no-checked-text',
            ]">{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>

		</con-alert>
	</view>
</template>

<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	import TarBar from "@/components/tarbar/index.vue";
	import conAlert from "@/components/com-alert/com-alert.vue";
	const index = require("@/api/index/index.js");
	const personal = require('@/api/personal/index.js')
	export default {
		components: {
			QSNavbar,
			TarBar,
			conAlert,
		},
		computed: {
			filterTab() {
				if (this.detail.hiddenTab) {
					let data = this.detail.tabList.slice(0, 4);
					data.push({
						icon: this.$https.assetsPath +
							"6bdbf4f1d1e68a2f393b2e9392d4ebf3c38d1356.png",
						name: "更多",
						id: -1,
					});

					return data;
				} else {
					return this.detail.tabList;
				}
			},
		},

		data() {
			return {
				navbarItems_1: [{
					layout: "left",
					type: "text",
					text: "场馆",
					width: 15,
					weight: "bold",
					color: "#000",
				}, ],
				status: "loading",
				homeData: [],
				detail: {
					list: [],
					tabList: [], //图标菜单
					hiddenTab: false, //隐藏tab
				},
				page: 1,
				address: {
					name: "",
					city: "",
					province: "",
				},
				searchKey: "", //搜索关键词
				// tabbar_index: 1,
				tabbar_index: 0,
				coordinates: {}, //经纬度
				vennusIdList: "", //产管id
				icon: this.$https.assetsPath + "6bdbf4f1d1e68a2f393b2e9392d4ebf3c38d1356.png",
				clickMenuId: 0,
				alertShow: false,
				type: 1,
				page_url:"/pages/venues/index"
			};
		},
		created() {
			this.getAppletConfig();
		},
		onLoad(options) {
			// 查询对应小程序的配置信息
			// this.getAppletConfig()
			this.address.name = options.name;
			this.address.province = options?.province;
			this.address.city = options?.city;
			
			// this.getXiaoFeiMaTopText()
		},
		onShow() {
			let _this = this
			this.clickMenuId = uni.getStorageSync('id');
			if (this.clickMenuId === -1) {
				this.alertShow = true;
				this.clickMenuId = 0
				// _this.getVenusList();
			}
			uni.removeStorage({
				key: 'id',
				success: function(res) {}
			});
		},
		methods: {
			close() {
				this.alertShow = false;
			},
			openKind(item, index, type) {
				let _this = this
				if (this.clickMenuId == item.id) {
					this.clickMenuId = 0
				} else {
					this.clickMenuId = item.id;
				}
				if (this.clickMenuId === -1) {
					this.alertShow = true;
				} else {
					_this.detail.list = ''
					_this.getVenusList();
					_this.alertShow = false;
				}
				// uni.navigateTo({
				// 	url:"/pages/venues/kindDetail/kindDetail"
				// })
			},
			// 判断双数还是单数
			isOdd(num) {
				return num % 2 == 1;
			},
			// onLoad(option) {
			// 	this.address.name = option.name;
			// 	this.address.province = option?.province;
			// 	this.address.city = option?.city;
			// },
			openAdress() {
				uni.redirectTo({
					url: `/pages/venues/selectAdress?id=${this.vennusIdList}`,
				});
			},
			handClick(id) {
				uni.navigateTo({
					url: "/page_venues/pages/venuesDetail/venuesDetail?id=" + id,
				});
			},
			async getLocation() {
				const [err, res] = await uni.getLocation({
					isHighAccuracy: true, // 开启地图精准定位
					type: "gcj02",
				});
				let latlng = {};
				if (!err) {
					latlng = {
						lat: res.latitude,
						lng: res.longitude,
					};
					this.coordinates = latlng;
				}
			},
			async getAppletConfig() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				let that = this;
				let data = {
					weixinAppId: this.$https.weixinAppId,
					projectId: getApp().globalData.projectId,
				}
				// await this.getLocation();
				this.getLocation();
				let result = await index.index(data);
				if (result.code == 1) {
					that.homeData = result.data; // 首页完整数据
					this.vennusIdList = result.data.venues;
					this.homeData.footer.forEach((item,index)=>{
						if (this.page_url == item.page_url) {
							this.tabbar_index = index
						} 
					})
					this.$nextTick(function() {
						this.homeData.footer[this.tabbar_index].this_icon =
							this.homeData.footer[this.tabbar_index]?.selected_icon;
					}); // 默认选中底部Tabbar
					uni.hideLoading();
					that.getVenusList();
				}
			},
			async getVenusList(val) {
				let data = {
					venues_id: this.vennusIdList,
					weixinAppId: this.$https.weixinAppId,
					projectId: getApp().globalData.projectId,
					limit: 10,
					page: this.page,
					province: this.address.province,
					city: this.address.city,
					// lat:this.coordinates.lat,
					// lng:this.coordinates.lng,
					...this.coordinates,
					searchVal: val,
					projects: this.clickMenuId,
					not_child:1
				};
				let result = await index.getVenusList(data);
				if (result.code == 1) {
					if (this.detail.list.length < 1) {
						this.detail.list = result.data.data;
					} else {
						this.detail.list.push(...result.data.data);
					}
					this.status = "loadmore";

					//设置tab
					if (this.detail.tabList.length < 1) {
						this.detail.tabList = result.data.project;
						if (this.detail.tabList.length > 5) {
							this.detail.hiddenTab = true;
						}
					}

					if (result.data.data.length < 10) {
						this.status = "nomore";
					}
				}
			},
			loadNewsList() {
				this.status = "loading";
				this.page += 1;
				this.getVenusList();
			},
			search(val) {
				this.page = 1;
				this.detail.list = [];
				this.status = "loading";
				this.getVenusList(val);
				
			},
		},
	};
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f3f3f3;
	}

	.top {
		padding: 0px 30rpx;
		padding-top: 20rpx;
		padding-bottom: 40rpx;
		background-color: white;
		width: 100%;

		.adress {
			margin-left: 30rpx;
			font-size: 28rpx;
			color: #000;
		}

		.checked-address {
			margin-left: 30rpx;
			font-size: 28rpx;
			color: #2f75fa;
		}

		.top-menu-list {
			display: flex;
			flex-wrap: wrap;

			.top-menu-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 20%;
				margin-top: 30rpx;
				padding: 0px 30rpx;
				box-sizing: border-box;
				font-size: 25rpx;

				.add_na {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 20%;
					// margin-top: 30rpx;
					padding: 0px 30rpx;
					box-sizing: border-box;
					font-size: 25rpx;

					.menu-image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 37rpx;
						background: rgb(250, 237, 234);
						background: linear-gradient(45deg,
								rgba(250, 237, 234, 1) 0%,
								rgba(246, 227, 216, 1) 77%);
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 60rpx;
							height: 60rpx;
						}
					}

					.menu-image-no-checked {
						width: 100rpx;
						height: 100rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 60rpx;
							height: 60rpx;
						}
					}

					.no-checked-text {
						margin-top: 20rpx;
						white-space: nowrap;
					}

					.checked-text {
						margin-top: 20rpx;
						white-space: nowrap;
						font-weight: bold;
					}
				}
			}
		}
	}

	.venue-list {
		flex: 1;
		// height: 0;

		.scrollcolumn {
			height: 100%;

			.bottom {
				background-color: white;
				padding: 30rpx 30rpx;

				.bottom-item {
					display: flex;
					width: 100%;
					margin-bottom: 40rpx;

					.image-box {
						position: relative;
						width: 200rpx;
						height: 150rpx;
						margin-right: 30rpx;

						.image-box2 {
							border-radius: 10rpx;
							width: 100%;
							height: 100%;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.tag-box {
							position: absolute;
							top: -10rpx;
							left: 0;
							z-index: 2;

							image {
								width: 35px;
								height: 17px;
								left: 0;
							}

							text {
								position: absolute;
								left: 0;
								font-size: 19rpx;
								text-align: center;
								top: 2px;
								width: 100%;
							}
						}
					}

					.item-info {
						width: calc(100% - 200rpx - 30rpx);
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						/deep/ .u-tag--mini {
							padding: 0px 20rpx;
							height: 18px;
						}

						.item-info-top {
							.title {
								font-size: 30rpx;
								margin-bottom: 20rpx;
							}

							.tag-list {
								display: flex;

								/deep/ view {
									margin-right: 10rpx;
								}
							}
						}

						.item-info-bottom {
							display: flex;
							width: 100%;
							justify-content: space-between;
							padding-bottom: 10rpx;
							color: #b8b8b7;
							font-size: 24rpx;

							.desc {
								width: 65%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}
	}
</style>
